<template>
  <div id="app" ref="imageTofile">
    <el-container >
      <el-header><button @click="backwe">反馈我们</button></el-header>
      <el-main><router-view/></el-main>
    </el-container>

    <el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" center>
      问题：<el-input v-model="input" placeholder="请输入内容"></el-input>
      <div style="margin: 20px 0;"></div>
      截图：
      <button @click="start"><i class="el-icon-scissors"></i>(或者 Shift + A)</button>
      <div class="imagesDiv">
        <img :src="img"/>
      </div>
      <div style="margin: 20px 0;"></div>
      问题描述：
      <el-input type="textarea" placeholder="请输入内容" v-model="textarea" maxlength="30" show-word-limit>
      </el-input>
      <div style="margin: 20px 0;"></div>
      <span>
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import kscreenshot from 'kscreenshot'
import html2canvas from 'html2canvas'
export default {
    name: "App",
    data(){
        return {
            kss:{},
            img:"",
            input:"",
            textarea:"",
            centerDialogVisible: false
        }
    },
    components: {
    　　html2canvas
    },
    created(){
      let _this = this;
      document.onkeydown = function (e) {
        let evn = e || event;
        let key = evn.keyCode || evn.which || evn.charCode;
        if (key === 65 && e.shiftKey===true) {
          _this.start();
        }
      }
      
      this.kss = new kscreenshot(
          {
              key: 0 ,
              endCB(e){
                  _this.endCB(e)
              },
              cancelCB(e){
                  _this.cancelCB(e)
              }
          }
      )
    },
    methods:{
      backwe(){
        this.toImage();
        this.centerDialogVisible = true;
      },
        start(){
            this.centerDialogVisible = false;
            let _this = this;
            setTimeout(function(){
              _this.kss.startScreenShot();
            },400)
        },
        endCB(e){
            this.img = e;
            this.centerDialogVisible = true;
        },
        cancelCB(e){
          this.centerDialogVisible = true;
        },
        toImage() {
    　　　　// 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
    　　　　html2canvas(document.querySelector("html"), {
    　　　　　　backgroundColor: null
    　　　　}).then((canvas) => {
    　　　　　　let url = canvas.toDataURL('image/png');
    　　　　　　this.img = url;
    　　　　})
    　　},
    }
}
</script>

<style>
html,body{
    padding: 0;
    margin: 0;
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.el-header{
  height: 50px;
  width: 100%;
  background-color: #2c3e50;
  position:fixed;
  top: 0;
  display: flex;
  align-items : center;
  justify-content : flex-end;

}
.el-header button{
  height: 25px;
  line-height: 25px;
}
.el-aside{
  height: calc(100% - 50px);
  width: 100px;
  background-color:cadetblue;
}
.imagesDiv{
    border: 1px solid #ccc;
    overflow: hidden;
    width: 100%;
    /* height: 100px; */
}
.imagesDiv img{
  width: 100%;
  /* height: 100%; */
}
.el-dialog{
  width: 600px!important;
  /* max-height: 700px; */
}
</style>
